<template>
  <div>
    <div class="header">
      <div class="item" v-for="item in info" :key="item.id">
        <div>
          <div class="span"><p>{{item.item}}</p>
            <span style="color:#c69c6c;font-size:24px;">
              {{item.data ? item.data : 0}}
            </span>
          </div>
          <div class="icon"><i :class="'el-icon-' + item.icon"></i></div>
          <div class="clear"></div>
        </div>
      </div>
      <div class="clear"></div>
    </div>
    <div class="main">
      <Echarts1/>
      <Echarts3/>
      <Echarts2/>
      
      <Echarts4/>
    </div>
  </div>
</template>

<script>
import {reqAdminCensus} from '../../../api'
import Echarts1 from './Home/Echarts1.vue'
import Echarts2 from './Home/Echarts2.vue'
import Echarts3 from './Home/Echarts3.vue'
import Echarts4 from './Home/Echarts4.vue'
export default {
  name:'Home',
  components:{Echarts1,Echarts2,Echarts3,Echarts4},
  data() {
    return {
      info:[
        {id:1,item:'用户',icon:'user',data:''},
        {id:2,item:'商品',icon:'s-goods',data:''},
        {id:3,item:'商品类型',icon:'goods',data:''},
        {id:4,item:'今日成交量',icon:'s-order',data:''},
        {id:5,item:'总成交量',icon:'s-marketing',data:''},
      ],
    }
  },
  async mounted() {
    // 上部分统计
    const census = await reqAdminCensus()
    this.info.forEach((item,index) => {
      item.data = census[index]
    })
  }
}
</script>

<style scoped>
.header{
  padding: 8px 0 0 0;
  /* overflow: auto; */
}
.main{
  overflow: auto;
}
.item{
  background: white;
  padding: 16px;
  border-radius: 8px;
  margin-right: 10px;
  float: left;
  width: 166px;
  margin-bottom: 10px;
}
.span{
  width: 50%;
  float: left;
  border-radius: 8px;
  line-height: 32px;
  color: #999999;
  text-align: center;
}
.icon{
  /* width: 40%; */
  float: right;
  padding: 5px;
  font-size: 30px;
  border-radius: 8px;
  background: #EFF2F7;
  margin-top: 10px;
}
</style>